<script setup lang="ts">
import { appStore } from '@/stores/app'
const app = appStore()

import { defineEmits, defineProps, computed } from 'vue'
import { hasPermission } from '@/utils'
import { type IField } from '@/contants'
import ColumnSet from '@/components/ColumnSet.vue'

const emits = defineEmits(['add', 'refresh'])
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  permission: {
    type: String,
    required: false
  },
  fields: {
    type: Array<IField>,
    required: false
  },
  disableSet: {
    type: Boolean,
    required: false
  },
  disableAdd: {
    type: Boolean,
    required: false
  },
  advance: {
    type: Boolean,
    required: false
  }
})

const canAdd = computed(() => {
  return !props.disableAdd && props.permission
    ? hasPermission(props.permission)
    : hasPermission(props.name.toLowerCase() + ':add')
})
const columnName = computed(() => {
  return 'Browse' + props.name.charAt(0).toUpperCase() + props.name.substring(1)
})

function refresh(data: Array<IField>) {
  emits('refresh', data)
}
</script>

<template>
  <!-- <div> -->
  <!-- {{ $t("label.operator") }} -->
  <el-button-group>
    <column-set
      v-if="!disableSet"
      :name="columnName"
      :fields="fields||[]"
      @refresh="refresh"
      :advance="advance"
    ></column-set>
    <el-tooltip v-if="canAdd" :content="$t('button.addTip')" :disabled="app.disableTip">
      <el-button type="primary" @click="$emit('add')" icon="Plus" size="small" />
    </el-tooltip>
  </el-button-group>
  <!-- </div> -->
</template>

<style></style>
